<template>
  <div>
    <div class="search">
      <Row>
        <Col>
          <Card>
            <Row>
              <Form ref="searchForm" :model="searchForm" inline :label-width="70" class="search-form">
                <Form-item label="物料名称" prop="">
                  <Input v-model="searchForm.name" style="width:300px" />
                </Form-item>
                <Form-item style="margin-left:-35px;" class="br">
                  <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
                  <Button @click="handleReset">重置</Button>
                </Form-item>
              </Form>
            </Row>
            <Row class="operation">
              <Button @click="add" type="primary" icon="md-add" >新增物料名称</Button>
              <Button @click="refresh" icon="md-sync">刷新</Button>
            </Row>
            <Row>
              <Alert show-icon>
                已选择 <span class="select-count">{{selectCount}}</span> 项
                <a class="select-clear" @click="clearSelectAll">清空</a>
              </Alert>
            </Row>
            <Row>
              <Table
                border
                :loading="loading"
                :columns="columns"
                :data="data"
                sortable="custom"
                @on-selection-change="showSelect"
                ref="table">
              </Table>
            </Row>
            <Row type="flex" justify="end" class="page">
              <Page
                :current="searchForm.pageNumber"
                :total="total"
                :page-size="searchForm.pageSize"
                @on-change="changePage"
                @on-page-size-change="changePageSize"
                :page-size-opts="[10,20,50]"
                size="small"
                show-total
                show-elevator
                show-sizer
              ></Page>
            </Row>
          </Card>
        </Col>
      </Row>
      <!-- 编辑物料窗体 -->
      <Modal title="编辑物料" v-model="editMaterialVisible" :mask-closable='false' :width="500" :styles="{top: '200px'}">
        <Form ref="editMaterialForm" :model="editMaterialForm" :label-width="100" >
          <Form-item label="物料名称">
            {{ this.editMaterialForm.name }}
          </Form-item>
          <FormItem label="物料编码前缀" prop="pre_code">
            {{ this.editMaterialForm.pre_code }}
          </FormItem>
          <Form-item label="物料运输类别" prop="type_id">
            <Select v-model="editMaterialForm.type_id" clearable filterable style="width:300px">
              <Option v-for="(item,index) in materialTypeList" :value="item.id" :key="index">
                {{ item.discription }}
              </Option>
            </Select>
          </Form-item>
        </Form>
        <div slot="footer">
          <Button type="text" @click="cancelMaterial">取消</Button>
          <Button type="primary" @click="submitEditMaterial">提交</Button>
        </div>
      </Modal>
      <!-- 新增物料名称窗体 -->
      <Modal title="新增物料名称" v-model="addMaterialVisible" :mask-closable='false' :width="500" :styles="{top: '200px'}">
        <Form ref="addMaterialForm" :model="addMaterialForm" :label-width="120" :rules="addMaterialFormValidate">
          <Form-item label="物料名称" prop="name">
             <Input v-model="addMaterialForm.name"/>
          </Form-item>
          <FormItem label="物料编码前缀" prop="pre_code">
            <Input v-model="addMaterialForm.pre_code"/>
          </FormItem>
          <Form-item label="物料运输类别" prop="type_id">
            <Select v-model="addMaterialForm.type_id" clearable filterable style="width:300px">
              <Option v-for="(item,index) in materialTypeList" :value="item.id" :key="index">
                {{ item.discription }}
              </Option>
            </Select>
          </Form-item>
        </Form>
        <div slot="footer">
          <Button type="text" @click="cancelMaterial">取消</Button>
          <Button type="primary" @click="submitAddMaterial">提交</Button>
        </div>
      </Modal>
    </div>
  </div>
</template>
<script>
import util from '@/libs/util';
import { getMaterialNameList, getMaterialTypeList, editMaterialName, insertMaterialName } from '@/api/material';
export default {
  data() {
    const validateMaterialName = (rule, value, callback) => {
      if (!value) {
        callback(new Error('物料名称必须选择'))
      } else {
        callback();
      }
    };
    return {
      loading: false,
      addMaterialVisible: false,
      editMaterialVisible: false,
      materialTypeList: [],
      searchForm: {
        name: '',
        pageNumber: 1,
        pageSize: 10,
      },
      addMaterialForm: {
        pre_code: '',
        name: '',
        type_id: 0
      },
      editMaterialForm: {
          id: 0,
          type_id: null,
          pre_code: '',
          name: '',
        },
      addMaterialFormValidate: {
        name: [
          {required: true, message: "物料名称不能为空", trigger: "blur"}
        ],
        pre_code: [
          {required: true, message: "物料编码前缀不能为空", trigger: "blur"}
        ]
      },
      data: [],
      total: 0,
      selectCount: 0,
      selectList: [],
      exportData: [],
      columns: [
        {
          type: "selection",
          width: 50,
          align: "center",
          fixed: "left"
        },
        {
          type: "index",
          width: 50,
          align: "center",
          fixed: "left"
        },
        {
          title: '物料编码前缀',
          key: 'pre_code',
          align: "center",
          width: 120
        },
        {
          title: '物料名称',
          key: 'name',
          width: 240
        },
        {
          title: '运输类别',
          key: 'discription',
          width: 240
        },
        {
          title: '操作',
          key: 'action',
          width: 180,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.edit(params.row)
                  }
                }
              }, '编辑'),
            ]);
          }
        }
      ],
    }
  },
  methods: {
    getAllList() {
      this.loading = true;
      getMaterialNameList(this.searchForm).then(res => {
        if (res.code === 0) {
          this.data = res.data.raws;
          this.total = res.data.count;
        }
        this.loading = false;
      })
    },
    getMaterialType() {
      getMaterialTypeList().then(res => {
        if (res.code === 0) {
          this.materialTypeList = res.data.raws;
        }
      })
    },
    init() {
      this.getAllList();
      this.getMaterialType();
    },
    clearSelectAll() {
      this.$refs.table.selectAll(false);
    },
    showSelect(e) {
      this.exportData = e;
      this.selectList = e;
      this.selectCount = e.length;
    },
    changePage(v) {
      this.searchForm.pageNumber = v;
      this.getAllList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getAllList();
    },
    handleSearch() {
      if (this.searchForm.name.trim() === '') {
        this.$Message.warning('请输入材料名称');
      } else {
        this.getAllList();
      }
    },
    handleReset() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      this.searchForm.name = '';
      this.getAllList();
    },
    add() {
      this.addMaterialVisible = true;
    },
    refresh() {
      this.getAllList();
    },
    edit(v) {
      const hasPermission = util.oneOf('edit', this.$route.meta.permTypes);
      if (!hasPermission) {
        this.$Message.error('抱歉，您没有操作权限！');
        return;
      };
      this.editMaterialForm.id = v.id;
      this.editMaterialForm.pre_code = v.pre_code;
      this.editMaterialForm.name = v.name;
      this.editMaterialForm.type_id = v.type_id;
      this.editMaterialVisible = true;
    },
    submitEditMaterial() {
      editMaterialName(this.editMaterialForm).then(res => {
        if (res.code === 0) {
          this.$Message.success(res.message);
          this.editMaterialVisible = false;
          this.getAllList();
        }
      })
    },
    submitAddMaterial() {
      this.$refs.addMaterialForm.validate(valid => {
        if (valid) {
          insertMaterialName(this.addMaterialForm).then(res => {
            console.log(res)
            if (res.code === 0) {
              this.$Message.success(res.message);
              this.addMaterialVisible = false;
            } else {
              this.$Message.error(res.message);
              return;
            }
          })
        }
      })
    },
    cancelMaterial() {
      this.addMaterialVisible = false;
      this.editMaterialVisible = false;
    }
  },
  mounted() {
    this.init();
  }
}
</script>
<style lang="less">
  @import "./materialTypeManager.less";
</style>